<template>
    <div>
        <van-row>
            <Hearders />
            <van-col span="4">
                <Left />
            </van-col>
            <van-col span="4">
                <h4>工作台</h4>
                <table>
                    <tr v-for="(i,j) in worklist" :key="i.id">
                        <td @click="huoqu(j)">{{i.name}}</td>
                    </tr>
                </table>
            </van-col>
            <van-col span="10">
                <!-- {{worklist}} -->
                <!-- {{para}} -->
                <!-- {{alldate}} <br> -->
                <!-- {{down}} -->
                <table>
                    <tr v-for="(k,l) in para" :key="k.id">
                        <td>

                            <p v-if="k.type == 'input'">
                            <van-field :label="k.name"  placeholder="请输入" v-model="alldate[k.name]"></van-field>
                            </p>
                            <p v-if="k.type=='select'">
                                请假类型:
                                <select  v-model="down">
                                    <option :value="h.id" v-for="h in k.values" :key="h.id">{{h.name}}</option>
                                </select>
                            </p>
                        
                            <p v-if="k.type=='datetime'">{{k.name}}<input type="date" v-model="alldate[k.name]"></p>

                            <p v-if="k.type=='file'">
                                请选择上传文件:
                                <van-uploader :after-read="afterRead" />
                            </p>
                            
                            
                        </td>
                        
                    </tr>
                    <p v-if="a==1">
                        <button @click="uodate">提交</button>
                    </p>
                </table>

            </van-col>
                    <van-col span="4" v-if="a==1">
                        请选择您的领导:
                        <select name="" id="" v-model="lead">
                            <option :value="i.name" v-for="i in nextlead">{{i.name}} &ensp;  {{i.depart}}  &ensp; {{i.job}}</option>
                        </select>
                    </van-col>
            </van-row>

    </div>
</template>

<script>
import axios from '../../http/axios'
import Hearders from '../comm/hearders.vue'
import Left from '../comm/left.vue'

    export default {
    components: { Hearders, Left },
        
        data() {
            return {
                worklist:[],
                para:[],
                a :0,
                //接收文件名
                filename:'',
                alldate:{},
                down:0,
                userid:localStorage.getItem('userid'),
                //下一个审批人
                nextlead:[],
                lead:''
            }
        },
        methods: {
            //获取工作流
            getwork(){
                axios('/users/appwork/','get').then(res=>{
                    let lst = res.list
                    for(var i =0;i<lst.length;i++){
                    lst[i]["params"]=JSON.parse(lst[i]["params"])
                    }
                    this.worklist=lst
                    console.log(this.worklist)
                    
                })
            },
            //获取该工作流的申请页面
            huoqu(j){
                this.para = this.worklist[j]['params']
                this.a = 1
            },
            //图片
            afterRead(file){
                // console.log(file.file.name);
                this.filename = file.file.name
            },
            //提交数据集
            uodate(){
                let data = new FormData()
                data.append('file',this.filename)
                data.append('select',this.down)
                data.append('lead',this.lead)
                data.append('userid',this.userid)
                data.append('data',JSON.stringify(this.alldate))
                //上传后端
                axios('/users/getorigin/','post',data).then(res=>{

                })
            },
            //获取下一个批准人
            getlead(){
                axios('/users/getlead/','get').then(res=>{
                    this.nextlead = res.list
                    
                })
            }
            
        },
        mounted() {
            this.getwork()
            this.getlead()
            
        },
    }
</script>

<style scoped>

</style>